<template>
    <div class="addSkuIndex">
        <el-dialog
                title="添加商品"
                :visible.sync="isShowDialog"
                 width="1000px"
                :close-on-click-modal="isModelClose"
                :style="dialogStyle"
                :before-close="close">
            <el-steps align-center :active="active" finish-status="success">
                <el-step title="商品基本信息"></el-step>
                <el-step title="添加库存信息"></el-step>
                <el-step title="添加规格参数信息"></el-step>
            </el-steps>
            <spu-basic-info style="margin-top: 10px" :params="params" ref="goodsBasicTable" v-show="active==1"/>
            <sku-info style="margin-top: 10px" :params="params" ref="goodsTable" v-show="active==2"/>
            <params-info style="margin-top: 10px" ref="goodsParamsTable" :params="params" v-show="active==3"/>
            <span slot="footer" class="dialog-footer">
                    <el-button type="primary" v-if="active!=1" @click="preStep">上一步</el-button>
                    <el-button type="primary" v-if="active!=3" @click="nextStep">下一步</el-button>
                    <el-button type="primary" v-if="active==3" @click="confirm()">确定</el-button>
                    <el-button @click="close">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script lang="ts">
    import {Component, Emit, Vue,Prop} from 'vue-property-decorator';
    import $ from "jquery";
    import SpuBasicInfo from "@/components/product-manager/dialog/spu-basic-info.vue";
    import SkuInfo from "@/components/product-manager/dialog/sku-info.vue";
    import ParamsInfo from "@/components/product-manager/dialog/params-info.vue";
    import {namespace} from "vuex-class";
    import AdminApiActions from "@/components/api/admin-api-actions";
    const goodStore=namespace("goods");
    @Component({
        components:{
            SpuBasicInfo,
            SkuInfo,
            ParamsInfo
        }
    })
    export default class Index extends Vue {
        @goodStore.Mutation updateGoodState;
        @Prop() params;
        public isModelClose:boolean=false;
        public dialogStyle:any={};
        public isShowDialog:any=true;
        public active=1;
        public centerDialog(){
            this.$nextTick(()=>{
                let dialogHeight=$(".addSkuIndex .el-dialog").height();
                let windowHeight=$(window).height();
                let dh=windowHeight/2-dialogHeight/2+20;
                this.dialogStyle={
                    top:dh+"px"
                };
            });
        }
        @Emit("close")
        public close(){
            this.isShowDialog=false;
        }
        async created() {
            this.centerDialog();
        }
        public preStep(){
            this.active=this.active-1;
            this.centerDialog();
        }

        public nextStep(){
            if(this.active==2){
                let skuTableData:any=(this.$refs.goodsTable as any).getTableData();
                if(skuTableData.length!==1){
                    this.$alert('只能选中一条sku数据维护规格参数', '提示', {
                        confirmButtonText: '确定'
                    });
                    return false;
                }
                let curIndex=skuTableData[0].id;
                this.updateGoodState({skuIndex:curIndex});
            }
            this.active=this.active+1;
            this.centerDialog();
        }
        //组装Sku，Spu,规格参数信息
        public async confirm(){
            //获取基本信息
            let spuName:any=(this.$refs.goodsBasicTable as any).name;
            let spuDescription:any=(this.$refs.goodsBasicTable as any).content;
            //获取Sku信息
            let skuTableList:any=(this.$refs.goodsTable as any).skuData;
            //获取每一个Sku的规格参数信息
            let skuParams:any=(this.$refs.goodsParamsTable as any).tableData;
            let params:any={};
            if(this.params&&this.params.spuDataItem){
                params.id=this.params.spuDataItem.id;
            }
            params.name=spuName;
            params.description=spuDescription;
            skuTableList.forEach(item=>{
                let curParams=skuParams.filter(curItem=>curItem.skuId==item.id);
                item.params=curParams;
            });
            params.skuList=skuTableList;
            await AdminApiActions.addSpuItem(params);
            this.close();
        }

    }
</script>
<style lang="less">
    .addSkuIndex{
        background-color: white;
        .el-dialog{
            margin-top: 0px!important;
            margin-bottom: 0px!important;
        }
        .el-dialog__wrapper{
            position: absolute;
        }
        .dialog-footer{
            display: flex;
            justify-content: center;
        }
        .el-dialog__body{
            padding: 0px 20px;
        }
    }
</style>